<!--
	访问统计
	Created by Penglei on 2023/08/08
-->
<template>
	<div class="visits">
		<!-- 统计量 -->
		<div class="visits-count-box">
			<VisitsCount title="今日访问次数" :num="todayVisits"></VisitsCount>
			<VisitsCount title="累计访问次数" :num="totalVisits"></VisitsCount>
		</div>
		<!-- 使用排名 -->
		<div class="using-rankings">
			<div class="using-rankings-title">
				<div class="using-rankings-title-name">系统使用排名（TOP3)</div>
				<el-radio-group v-model="tabActive" @change="onChangeRadio">
					<el-radio-button label="today">今日</el-radio-button>
					<el-radio-button label="month">本月</el-radio-button>
					<el-radio-button label="all">全部</el-radio-button>
				</el-radio-group>
			</div>
			<div id="echartsRef" ref="echartsRef" class="echats-box"></div>
		</div>
	</div>
</template>

<script setup name="AccessStatistics">
import { onMounted, ref } from 'vue';
// 引入echats
import * as echarts from 'echarts';
// 访问次数组件
import VisitsCount from '@/components/VisitsCount';
// 引入接口
import { getAccessStatisticsApi } from '@/api/basicData'

// 选择项
let tabActive = ref('month');

// 今日访问量
let todayVisits = ref(0);
// 累计访问量
let totalVisits = ref(0);
// 今日
let arrToday = [];
// 本月
let arrMonth = [];
// 累计
let arrAccumulate = [];
// 数量字段
let fideCount = 'todayVisitNum';

// 按钮切换事件
const onChangeRadio = (val) => {
	if (val == 'today') {
		fideCount = 'todayVisitNum';
		// 渲染图表，今日
		renderChart(arrToday);
	}
	else if (val == 'month') {
		fideCount = 'monthVisitNum';
		// 渲染图表，本月
		renderChart(arrMonth);
	}
	else if (val == 'all') {
		fideCount = 'accumulateVisitNum';
		// 渲染图表，累计
		renderChart(arrAccumulate);
	}
}

let myChart = null;
// 渲染图表
const renderChart = (list = []) => {
	if (!myChart) {
		myChart = echarts.init(document.getElementById('echartsRef'));
	}
	// 数据
	let dataAxis = [];
	let data = [];
	// 排序、遍历
	if (list && list.length) {
		list.sort((a, b) => a[fideCount] - b[fideCount]).map((item, index) => {
			// 省份
			dataAxis.push(item.province || '');
			// 数量
			data.push(item[fideCount]);
		})
	}
	// 配置项
	const option = {
		title: {
			show: false
		},
		xAxis: {
			type: 'value',
			position: 'top',
			// 不显示线条和刻度
			splitLine: {
				show: false,
			},
			axisLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				show: false,
			},
		},
		yAxis: {
			type: 'category',
			data: dataAxis,
			// 不显示线条和刻度
			axisLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				inside: false,
				fontSize: 14,
				margin: 22,
				color: '#999999',
				align: 'right',
			},
			splitLine: {
				show: false,
			}
		},
		grid: {
			show: false,
			left: '20%',
			right: '0',
			top: 10,
			bottom: 10,
		},
		tooltip: {
			show: true,
			formatter: '{b0}: {c0}'
		},
		// 数据缩放
		dataZoom: [
			{
				show: true,
				// 开始值
				startValue: data.length - 2,
				// 结束值，显示5个数据
				endValue: data.length,
				type: 'inside',
				yAxisIndex: 0,
				filterMode: 'empty',
			}
		],
		series: [
			{
				type: 'bar',
				barWidth: '10',
				showBackground: false,
				backgroundStyle: {
					borderRadius: [0, 5, 5, 0], //（顺时针左上，右上，右下，左下）
				},
				itemStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
						{ offset: 0, color: '#0775FE' },
						{ offset: 1, color: '#46FFFF' }
					]),
					barBorderRadius: [0, 5, 5, 0], //（顺时针左上，右上，右下，左下）
					// shadowColor: '#0775FE',
					// shadowBlur: 2,
				},
				data: data
			}
		]
	};
	// 渲染
	option && myChart.setOption(option);
}

// 加载数据
const getData = () => {
	getAccessStatisticsApi().then(res => {
		const { code, data } = res;
		if (code == 200 && data) {
			const {
				// 今日访问量
				todaySum,
				// 累计访问量
				accumulateSum,
				// 今日排名
				todayList,
				// 本月排名
				monthList,
				// 累计排名
				accumulateList,
			} = data;

			// 今日访问量
			todayVisits.value = todaySum || 0;
			// 累计访问量
			totalVisits.value = accumulateSum || 0;
			// 排名列表
			arrToday = [...todayList];
			arrMonth = [...monthList];
			arrAccumulate = [...accumulateList];
			// 渲染图表
			renderChart(arrToday);
		}
	}).catch(err => {
		console.log(err.message);
	})
}
// 挂载完成
onMounted(() => {
	// 加载数据
	getData();
})
</script>

<style lang="scss" scoped>
.visits {
	padding: 20px;
	font-family: Source Han Sans CN-Regular, Source Han Sans CN;

	// 统计量
	.visits-count-box {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.visits-count {
			margin-bottom: 20px;
			width: 187px;
		}
	}

	// 使用排名
	.using-rankings {
		&-title {
			display: flex;
			justify-content: space-between;
			flex-wrap: nowrap;
			height: 24px;
			line-height: 24px;

			&-name {
				font-size: 16px;
				font-weight: 400;
				color: #FFFFFF;
			}

			:deep(.el-radio-group) {
				width: auto;
				font-size: 12px;
				border-radius: 12px 12px 12px 12px;
				border: 1px solid rgba(70, 255, 255, 0.7);
				background: linear-gradient(135deg, #00032D 0%, #000C58 50%, #00032D 100%);

				.el-radio-button {
					.el-radio-button__inner {
						padding: 0 5px;
						background-color: transparent;
						border: none;
						margin-top: -4px;
						color: #46FFFF;
					}
				}

				.el-radio-button.is-active {
					background: #46FFFF;

					.el-radio-button__inner {
						color: #03007B;
					}
				}

				.el-radio-button:first-child {
					border-radius: 12px 0 0 12px;
				}

				.el-radio-button:last-child {
					border-radius: 0 12px 12px 0;
				}
			}
		}

		.echats-box {
			width: 100%;
			height: 110px;
		}
	}
}
</style>